<template>
    <div class="dangjian_detail_main">
        <div class="dangjian_detail_mains">
            <h2 class="dangjian_detail_mains_1 fontz">{{ detailDatas.contentTitle }}</h2>
            <div class="dangjian_detail_mains_2 fontz">
                来源：{{ detailDatas.contentSource }} 发布时间：{{
                detailDatas.createTime }}
                浏览量：0
            </div>
            <div class="gsClass" v-html="detailDatas.contentContents"></div>
            <!-- <div class="flex jcc"
                                        v-if="detailDatas.data.data.picFiles && detailDatas.data.data.picFiles.length != 0">
                                        <b-img :src="detailDatas.data.data.picFiles[0].url" alt="" srcset="" />
                                    </div> -->
        </div>
        <!-- <div class="dangjian_detail_main_footer ">
            <div class="flex" style="margin: 16px 0;">
                <span class="fontz">附件：</span>
                <div v-if="detailDatas.data.data.annexFiles && detailDatas.data.data.annexFiles.length != 0">
                    <a style="margin-right: 16px;" v-for="(item, index) in detailDatas.data.data.annexFiles"
                        :href="item.url">
                        <span class="fontz fonts16">{{ item.originalName }}</span>
                    </a>
                </div>
                <span v-else class="fontz fonts16">{{ "无" }}</span>
            </div>
        </div> -->
    </div>
</template>

<script setup lang="tsx">
import { reactive, unref, ref, watch } from "vue"
const props = defineProps({
    data: {
        type: Object,
        default() {
            return {}
        },
    },
})
const detailDatas: any = props.data
console.log("detailDatas", detailDatas);

</script>
<style lang="less">
.gsClass {
    table {
        border-collapse: collapse;
        /* 确保表格边框合并 */
    }

    table,
    th,
    td {
        text-align: center;
        border: 1px solid black;
        /* 设置表格、表头和单元格的边框 */
    }
}
</style>
<style lang="less" scoped>
.index-image {
    position: relative;
    height: 550px;
    width: 100%;

    .navHader {
        position: absolute;
        width: 100%;
        padding: 0 160px;
        z-index: 999;
        bottom: 0px;
        left: 0px;
    }
}

.index_top_bg_img {
    width: 100%;
    height: 100%;
    position: relative;



}

.dangjian-main {
    margin-bottom: 11px;

    img {
        width: 60px;
        height: 60px;
        margin-right: 12px;
    }
}

.dangjian_main {
    width: 80%;
    height: 332px;
    background: #FFFFFF;
    border: 1px solid #CACFD6;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
    border-radius: 0px 0px 0px 0px;
    margin-bottom: 30px;

    &:hover {
        border: 1px solid #2f6cbc;
    }

    .dangjian_img {
        padding: 25px;

        img {
            width: 456px;
            height: 280px;
        }
    }

    .dangjian_right {
        padding: 25px 25px 25px 0px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;

        .dangjian_right_title {
            font-size: 24px;
            font-weight: 400;
            color: #3D3D3D;

        }

        .dangjian_right_time {
            font-size: 18px;
            font-weight: 400;
            color: #898989;
            margin-bottom: 140px;
        }

    }

    .dangjian_btn {
        width: 126px;
        height: 40px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        border: 1px solid #2F6CBC;
        font-size: 18px;

        img {
            margin-left: 10px;
            width: 24px;
            height: 24px;
        }
    }
}


.dangjain_detail_nav {
    width: calc(100% - 22px);
    padding: 0px 22px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #2F6CBC;

    span {
        font-size: 1.125rem;
    }

    img {
        width: 24px;
        height: 24px;
        margin: 0px 6px;
    }
}

.dangjian_detail_main {
    width: calc(100% - 40px);
    margin-top: 10px;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #2F6CBC;
    padding: 0 19px;

    .dangjian_detail_mains {
        padding: 20px 0px 30px 0px;

        img {
            max-width: 100%;
        }

        .dangjian_detail_mains_1 {
            text-align: center;
            margin-bottom: 20px;
            font-size: 1.5rem;
            font-weight: 700;
            color: #000000;
        }

        .dangjian_detail_mains_2 {
            text-align: center;
            font-size: 1rem;
            font-family: 'Microsoft YaHei-Regular, Microsoft YaHei';
            font-weight: 400;
            color: #d5d5d5;
            margin-bottom: 30px;
        }

        .dangjian_detail_mains_3 {
            font-size: 1rem;
            font-family: 'Microsoft YaHei-Regular, Microsoft YaHei';
            font-weight: 400;
            color: #3D3D3D;
            line-height: 32px;
        }
    }

    .dangjian_detail_main_footer {
        padding: 0 1.375rem;
        height: 125px;
        border-top: 1px solid #2F6CBC;

        span {
            font-size: 1.125rem;
            font-weight: 400;
            color: #898989;

            &:hover {
                color: #2F6CBC;
            }
        }
    }
}

::v-deep img {
    max-width: 100%;
}
</style>